<template>
  <el-form ref="userSearchForm" :model="userSearch" label-width="74px" :inline="true" size="small">
    <el-form-item label="账号" prop="userName">
      <el-input v-model="userSearch.userName"></el-input>
    </el-form-item>
    <el-form-item label="姓名" prop="nickName">
      <el-input v-model="userSearch.nickName"></el-input>
    </el-form-item>
    <el-form-item label="身份证" prop="cardCode">
      <el-input v-model="userSearch.cardCode"></el-input>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
      <el-input v-model="userSearch.phone"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="userSearch.email"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="gender">
      <el-select v-model="userSearch.gender" placeholder="性别选择" >
        <el-option label="全部" value="ALL"/>
        <el-option label="男" :value="1"/>
        <el-option label="女" :value="0"/>
      </el-select>
    </el-form-item>
    <el-form-item label="状态" prop="userState">
      <el-select v-model="userSearch.userState" placeholder="用户状态" >
        <el-option label="全部" value="ALL"/>
        <el-option label="在线" value="ON_LINE"/>
        <el-option label="离线" value="OFF_LINE"/>
        <el-option label="过期" value="EXPIRATION"/>
        <el-option label="冻结" value="FREEZE"/>
        <el-option label="注册中" value="REGISTER"/>
      </el-select>
    </el-form-item>
    <el-form-item class="btn">
      <el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
      <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    userSearch: {
      type: Object,
      required: true,
    }
  },
  methods: {
    onSearch() {
      this.$emit("onSearch");
    },
    reset() {
      this.$refs.userSearchForm.resetFields();
    },
  },
  beforeDestroy() {
    this.$refs.userSearchForm.resetFields();
  }
};
</script>

<style scoped lang="scss">
.el-button {
  padding-left: 25px;
  padding-right: 30px;
}

.btn {
  margin-left: 30px;
}
</style>
